<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>示例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      @keyframes animationCss {
        0% {
          left: 0px;
          top: 0px;
        }

        100% {
          left: 50%;
          top: 50%;
        }
      }

      .box1 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: yellowgreen;
        position: absolute;
        /* transform: translate(300px, 0px); */
        /* position: relative; */
        animation: animationCss 4s infinite;
      }
    </style>
  </head>

  <body>
    <button onclick="play()" id="play-button">播放</button>
    <div class="box1"></div>

    <script>
      function play() {
        console.log(document.querySelector(".box1").style.animationPlayState);
        if (
          document.querySelector(".box1").style.animationPlayState != "running"
        ) {
          document.querySelector(".box1").style.animationPlayState = "running";
          document.querySelector("#play-button").innerHTML = "暂停";
        } else {
          document.querySelector(".box1").style.animationPlayState = "paused";
          document.querySelector("#play-button").innerHTML = "开始";
        }
      }
    </script>
  </body>
</html>
